<template>
  <div class="step-content">
    <el-form
      ref="discussSetForm"
      :model="discussSetForm"
      :rules="discussRules"
      label-width="150px"
      class="form-style"
    >
      <el-form-item v-if="sonSteps==1" label="标题名称" prop="titleName">
        <el-input v-model="discussSetForm.titleName" placeholder="请输入标题" style="width:600px;" />
      </el-form-item>
      <el-form-item v-if="sonSteps==1" label="说明">
        <tinymce id="editor" v-model="discussSetForm.content" :init="init" style="width:600px;" />
      </el-form-item>
      <el-form-item v-if="sonSteps==2" label="完成条件">
        <span>在本课程下发表或者回复一个话题</span>
      </el-form-item>
    </el-form>
    <div class="step-btn">
      <el-button v-if="sonSteps==1" type="info" @click="goStep0">上一步</el-button>
      <el-button v-if="sonSteps==1" type="info" @click="goStep2">下一步</el-button>
      <el-button v-if="sonSteps==2" type="info" @click="goStep1">上一步</el-button>
      <el-button v-if="sonSteps==2" type="primary" @click="submitSave">保 存</el-button>
    </div>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce' // 富文本组件
export default {
  components: {
    Tinymce
  },
  props: {
    steps: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      sonSteps: this.steps,
      discussSetForm: {
        titleName: '',
        content: ''
      },
      discussRules: {
        titleName: [{ required: true, message: '请输入标题', targger: 'blur' }]
      },
      init: {
        selector: '#editor',
        language: 'zh_CN',
        height: 100
      }
    }
  },
  methods: {
    goStep0() {
      this.$emit('nowStep0')
    },
    goStep1() {
      this.sonSteps = 1
      this.$emit('nowStep1')
    },
    goStep2() {
      // this.sonSteps = 2
      // this.$emit('nowStep2')
      this.$refs.discussSetForm.validate((valid) => {
        if (valid) {
          this.sonSteps = 2
          this.$emit('nowStep2')
        } else {
          return false
        }
      })
    },
    submitSave() {
      this.$emit('saveInfo')
    }
  }
}
</script>
<style lang="scss" scoped>
.step-content {
  min-height: 50px;
  .form-style {
    border-bottom: 1px solid #eee;
    margin-top: 20px;
    padding: 0 20px;
  }
  .step-btn {
    margin-top:20px;
    text-align: right;
  }
}
</style>
